import React from 'react'
import { clsx } from 'clsx'

export interface IconProps {
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  className?: string
  strokeWidth?: number
}

const sizeClasses = {
  xs: 'w-3 h-3',
  sm: 'w-4 h-4', 
  md: 'w-5 h-5',
  lg: 'w-6 h-6',
  xl: 'w-8 h-8'
}

const BaseIcon: React.FC<IconProps & { children: React.ReactNode; viewBox?: string }> = ({
  size = 'md',
  className = '',
  strokeWidth = 2,
  children,
  viewBox = '0 0 24 24'
}) => (
  <svg 
    className={clsx(sizeClasses[size], 'inline-block', className)}
    fill="none" 
    stroke="currentColor" 
    viewBox={viewBox}
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth={strokeWidth}
  >
    {children}
  </svg>
)

// 通用图标
export const SearchIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.35-4.35"></path>
  </BaseIcon>
)

export const PlusIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="M12 5v14M5 12h14"></path>
  </BaseIcon>
)

export const SettingsIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <circle cx="12" cy="12" r="3"></circle>
    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.05a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
  </BaseIcon>
)

export const ChevronDownIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="m6 9 6 6 6-6"></path>
  </BaseIcon>
)

export const ChevronRightIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="m9 18 6-6-6-6"></path>
  </BaseIcon>
)

export const SendIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="m22 2-7 20-4-9-9-4Z"></path>
    <path d="M22 2 11 13"></path>
  </BaseIcon>
)

export const CheckIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="M20 6 9 17l-5-5"></path>
  </BaseIcon>
)

// 编辑和操作图标
export const EditIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
    <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"></path>
  </BaseIcon>
)

export const DeleteIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="M3 6h18"></path>
    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
    <line x1="10" x2="10" y1="11" y2="17"></line>
    <line x1="14" x2="14" y1="11" y2="17"></line>
  </BaseIcon>
)

export const MoreVerticalIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <circle cx="12" cy="12" r="1"></circle>
    <circle cx="12" cy="5" r="1"></circle>
    <circle cx="12" cy="19" r="1"></circle>
  </BaseIcon>
)

// 状态图标
export const OnlineIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
    <line x1="9" x2="9.01" y1="9" y2="9"></line>
    <line x1="15" x2="15.01" y1="9" y2="9"></line>
  </BaseIcon>
)

export const OfflineIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <circle cx="12" cy="12" r="10"></circle>
    <line x1="8" x2="16" y1="16" y2="8"></line>
    <line x1="8" x2="16" y1="8" y2="16"></line>
  </BaseIcon>
)

export const LoadingIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
  </BaseIcon>
)

// AI功能图标
export const BrainIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path>
    <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"></path>
    <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"></path>
    <path d="M17.599 6.5a3 3 0 0 0 .399-1.375"></path>
    <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path>
    <path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path>
    <path d="M19.938 10.5a4 4 0 0 1 .585.396"></path>
    <path d="M6 18a4 4 0 0 1-1.967-.516"></path>
    <path d="M19.967 17.484A4 4 0 0 1 18 18"></path>
  </BaseIcon>
)

export const BookOpenIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
  </BaseIcon>
)

export const PenToolIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l8.586-8.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z"></path>
    <path d="m5 7 3 3"></path>
    <path d="m9 11 3 3"></path>
    <path d="m13 15 3 3"></path>
    <path d="m9 7 3-3 3 3"></path>
    <path d="m5 11 3-3"></path>
    <path d="m9 15 3-3"></path>
  </BaseIcon>
)

export const ImageIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
    <circle cx="9" cy="9" r="2"></circle>
    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
  </BaseIcon>
)

// 聊天相关图标
export const MessageCircleIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
  </BaseIcon>
)

export const UserIcon: React.FC<IconProps> = (props) => (
  <BaseIcon {...props}>
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
    <circle cx="12" cy="7" r="4"></circle>
  </BaseIcon>
)

// 交互反馈组件
export interface InteractiveIconProps extends IconProps {
  icon: React.ComponentType<IconProps>
  onClick?: () => void
  tooltip?: string
  variant?: 'default' | 'accent' | 'danger' | 'success'
  disabled?: boolean
}

export const InteractiveIcon: React.FC<InteractiveIconProps> = ({
  icon: Icon,
  onClick,
  tooltip,
  variant = 'default',
  disabled = false,
  className = '',
  ...iconProps
}) => {
  const variantClasses = {
    default: 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100',
    accent: 'text-accent-500 hover:text-accent-600 hover:bg-accent-50',
    danger: 'text-red-500 hover:text-red-600 hover:bg-red-50',
    success: 'text-green-500 hover:text-green-600 hover:bg-green-50'
  }

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      title={tooltip}
      className={clsx(
        'p-2 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-1',
        variantClasses[variant],
        disabled && 'opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current',
        'transform hover:scale-105 active:scale-95',
        className
      )}
    >
      <Icon {...iconProps} />
    </button>
  )
}

// 加载状态的图标动画
export const AnimatedLoadingIcon: React.FC<IconProps> = (props) => (
  <div className="animate-spin">
    <LoadingIcon {...props} />
  </div>
)

// 带计数的图标
export interface IconWithBadgeProps extends IconProps {
  icon: React.ComponentType<IconProps>
  count?: number
  showBadge?: boolean
}

export const IconWithBadge: React.FC<IconWithBadgeProps> = ({
  icon: Icon,
  count = 0,
  showBadge = true,
  className = '',
  ...iconProps
}) => (
  <div className={clsx('relative inline-block', className)}>
    <Icon {...iconProps} />
    {showBadge && count > 0 && (
      <span className="absolute -top-1 -right-1 bg-accent-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center font-medium">
        {count > 99 ? '99+' : count}
      </span>
    )}
  </div>
)